<template>
    <Layout>
        <public-header/>
        <Layout>
            <Content style="height: 700px;background: cornflowerblue">
                <Row :gutter="16" style="margin: 20px 1px 1px 80px">
                    <Col span="6">
                        <div>
                            <Card style="width:320px">
                                <div style="text-align:center">
                                    <img style="width: 285px;height: 285px"
                                         :src="noteBook.imgUrl"/>
                                    <h3>￥14.90</h3>
                                </div>
                            </Card>
                        </div>
                    </Col>
                    <Col span="14">
                        <div>
                            <Row style="background: crimson">
                                <Col span="22" style="height: 70px">
                                    <div style="text-align:center">
                                        <h2 style="font-family: 'Courier New',serif;font-size: 20px">
                                            {{noteBook.productName}}
                                        </h2>
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="22" style="height: 160px">
                                    <Row>
                                        <Col span="4">
                                            <h2>京 东 价</h2>
                                        </Col>
                                        <Col span="5" offset="2">
                                            <h2 style="font-family: 'Arial Rounded MT Bold',sans-serif;color: crimson">
                                                ￥9999.00</h2>
                                        </Col>
                                    </Row>

                                </Col>
                            </Row>
                            <Row :gutter="16" style="height: 50px">
                                <Col span="4">
                                    <div>
                                        <Button type="error" ghost>立即购买</Button>
                                    </div>
                                </Col>
                                <Col span="4" offset="2">
                                    <div>
                                        <Button type="error">加入购物车</Button>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </Col>
                </Row>
            </Content>
        </Layout>
        <public-footer/>
    </Layout>
</template>

<script>
    import PublicFooter from "@/components/PublicFooter";
    import PublicHeader from "@/components/PublicHeader";

    export default {
        name: "GoodsDetail",
        components: {
            PublicHeader,
            PublicFooter
        },

        methods: {
            getBooksDetail() {
                const bookId = this.$route.query.booksId;
                window.console.log('---------------------', bookId);
                this.$Loading.config(
                    {
                        color: 'red',
                        height: 4
                    }
                );
                this.$http.loadData("productDetail?productId=" + bookId, '', '')
                    .then(res => {
                        window.console.log(res);
                        if (res.data.code === 0) {
                            this.$Loading.finish();
                            window.console.log('=======================', JSON.stringify(res.data.data));
                            this.noteBook = res.data.data;
                        } else {
                            this.$Loading.finish();
                            this.$Message.error(res.data.msg);
                        }
                    });

            }
        },
        created() {
            this.getBooksDetail();

        },
        data() {
            return {
                noteBook: {

                }
            }
        }
    }
</script>

<style scoped>

</style>
